<script setup lang="ts">
import { PropType, reactive, ref } from 'vue'
import { ChatInterface/* , useStore */ } from 'stores/store'
// import { /* useRoute, */ useRouter } from 'vue-router'
import { i18n } from 'boot/i18n'
import { Notify, useDialogPluginComponent } from 'quasar'
import api from 'src/api'
import useExceptionNotifier from 'src/composables/useExceptionNotifier'
// import { navigateToUrl } from 'single-spa'

const props = defineProps({
  chat: {
    type: Object as PropType<ChatInterface>,
    required: true
  },
  callback: {
    type: Function,
    required: false
  }
})
/* const emits =  */
defineEmits([...useDialogPluginComponent.emits])

const { tc } = i18n.global
// const store = useStore()
// const route = useRoute()
// const router = useRouter()

const exceptionNotifier = useExceptionNotifier()

const {
  dialogRef,
  onDialogHide,
  // onDialogOK,
  onDialogCancel
} = useDialogPluginComponent()

const inputRef = ref<HTMLInputElement>()

const model = reactive({
  input: props.chat?.name || ''
})

const isPassCheck = () => {
  // 校验输入
  if (!model.input) {
    Notify.create({
      classes: 'notification-negative shadow-15',
      icon: 'error',
      textColor: 'negative',
      message: `${tc('请输入新的名称')}`,
      position: 'bottom',
      closeBtn: true,
      timeout: 5000,
      multiLine: false
    })
    inputRef.value?.focus()
    return false
  }
  return true
}

const onOKClick = async () => {
  if (!isPassCheck()) {
    return
  }

  // notify
  const dismiss = Notify.create({
    classes: 'notification-positive shadow-15',
    // icon: 'mdi-check-circle',
    spinner: true,
    textColor: 'positive',
    message: `${tc('正在修改对话名称')}`,
    position: 'bottom',
    closeBtn: true,
    timeout: 0, // infinite
    multiLine: false
  })

  try {
    /* const resp =  */
    await api.chat.v0.putChatSession({
      path: {
        id: props.chat?.id
      },
      body: {
        name: model.input
      }
    })

    // notify
    dismiss()
    Notify.create({
      classes: 'notification-positive shadow-15',
      icon: 'mdi-check-circle',
      textColor: 'positive',
      message: `${tc('成功修改对话名称')}`,
      position: 'bottom',
      closeBtn: true,
      timeout: 5000,
      multiLine: false
    })

    // close
    onDialogHide()

    // callback
    if (props.callback) {
      props.callback()
    }

    // // 跳转到该order详情页面
    // navigateToUrl(props.server?.vo_id ? `/my/server/group/order/detail/${resp.data.order_id}?autopay=${model.isAutoPay}` : `/my/server/personal/order/detail/${resp.data.order_id}?autopay=${model.isAutoPay}`)
  } catch (exception) {
    dismiss()
    exceptionNotifier(exception, 'RenameChatDialog')
  }
}

</script>

<template>
  <div class="">
    <!-- notice dialogRef here -->
    <q-dialog ref="dialogRef" @hide="onDialogHide">
      <q-card class="q-dialog-plugin dialog-primary ">

        <q-card-section class="row items-center justify-center q-pb-md">
          <div class="text-primary">{{ tc('重命名对话') }}</div>
          <q-space/>
          <q-btn icon="close" flat dense size="sm" v-close-popup/>
        </q-card-section>

        <q-separator/>

        <q-card-section>
          <q-input ref="inputRef" v-model="model.input" outlined clearable/>
        </q-card-section>

        <q-separator/>

        <q-card-actions align="between">

          <q-btn class="q-ma-sm"
                 color="primary"
                 outline
                 no-caps
                 :label="tc('取消')"
                 @click="onDialogCancel"/>

          <q-btn class="q-ma-sm"
                 color="primary"
                 unelevated
                 no-caps
                 :label="tc('确定')"
                 @click="onOKClick"/>

        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<style lang="scss" scoped>
</style>
